<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>vue9-06</title>
</head>
<body>
	<!-- 对含有组件的slot进行复用，需要将slot的每个子节点都克隆一份 -->
	<div id="app">
		<ele>
			<div>
				<Child></Child>
			</div>
		</ele>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
	<script>
		// 全局注册组件
		Vue.component('Child',{
			render:function(createElement){
				return createElement('p','text')
			}
		})

		Vue.component('ele',{
			render:function(createElement){
				// 克隆slot节点的方法
				function cloneVNode(vnode){
					// 递归遍历所有子节点，并克隆
					var clonedChildren = vnode.children && vnode.children.map(function(vnode){
						return cloneVNode(vnode)
					});
					// 对VNoded的关键属性进行复制
					var cloned = createElement(
							vnode.tag,
							vnode.data,
							clonedChildren
						);
					cloned.text = vnode.text;
					cloned.isComment = vnode.isComment; 
					cloned.componentOptions = vnode.componentOptions; 
					cloned.elm = vnode.elm; 
					cloned.context = vnode.context; 
					cloned.ns = vnode.ns; 
					cloned.isStatic = vnode.isStatic; 
					cloned.key = vnode.key; 
					return cloned; 
				}

				var vNodes = this.$slots.default;
				var clonedVNodes = vNodes.map(function(vnode){
					return cloneVNode(vnode);
				})

				return createElement('div',[vNodes,clonedVNodes])
			}
		})

		var app = new Vue({
			el:'#app'
		})
	</script>
</body>
</html>